<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VisualGPT-2API 测试面板 v2.0</title>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <div class="logo">
                <h3>VisualGPT-2API</h3>
            </div>
            <div class="form-group">
                <label for="model-select">模型 (Models)</label>
                <select id="model-select"></select>
            </div>
            <div class="form-group">
                <label>图片 (Images)</label>
                <div id="image-preview-container" class="image-drop-zone">
                    <img id="image-preview" src="#" alt="图片预览" class="hidden">
                    <span id="upload-placeholder">点击或拖拽图片到此处</span>
                </div>
                <input type="file" id="image-upload" accept="image/*" class="hidden">
            </div>
            <div class="form-group">
                <label for="prompt-input">提示词 (Prompt)</label>
                <textarea id="prompt-input" rows="4" placeholder="描述您的编辑需求..."></textarea>
            </div>
            <div class="form-group">
                <label>提示词模块 (Prompt Modules)</label>
                <div id="prompt-modules" class="prompt-modules"></div>
            </div>
            <div class="form-group">
                <label>长宽比 (Aspect Ratio)</label>
                <div id="aspect-ratio-selector" class="param-selector"></div>
            </div>
            <div class="form-group">
                <label>图像分辨率 (Image Resolution)</label>
                <div id="resolution-selector" class="param-selector"></div>
            </div>
            <div class="form-group">
                <label>生成张数 (Number of Images)</label>
                <div id="number-selector" class="param-selector"></div>
            </div>
            <button id="generate-btn">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/><path d="M2.5 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-3a.5.5 0 0 0-1 0v3a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-12a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v3a.5.5 0 0 0 1 0v-3a1 1 0 0 0-1-1h-9z"/></svg>
                <span>生成 (Generate)</span>
            </button>
        </div>
        <div class="main-content">
            <header>
                <div class="api-key-group">
                    <label for="api-key">API Key:</label>
                    <input type="password" id="api-key" placeholder="请输入您的 API Key" value="1">
                </div>
            </header>
            <div id="result-container" class="output-panel">
                <div id="spinner" class="spinner hidden"></div>
                <p id="status-message">欢迎使用 VisualGPT-2API 测试面板。请在左侧配置参数并开始生成。</p>
                <div id="result-image-wrapper" class="hidden">
                    <img id="result-image" src="#" alt="生成结果">
                    <div class="result-url-container">
                        <input type="text" id="result-url" readonly>
                        <button id="copy-url-btn">复制</button>
                    </div>
                </div>
                <div id="error-message" class="error hidden"></div>
            </div>
        </div>
    </div>
    <script src="/static/script.js"></script>
</body>
</html>